<template>
    <div class="h-between-center h100 w100">
        <!--        <template v-if="$store.state.userInfo.roleCode != 1">-->
        <template v-if="true">
            <div class="w50 h100 bg-white br5 p10 p-r mr5">
                <div class="h-between-center w100 pr20">
                    <div class="h-start-center">
                        <div class="apply-item-icon mr5"></div>
                        <div class="f16 fam ml5 h-start-center">
                            <div class="mr5">自评得分</div>
                            <div class="primary-color">{{ zpTotalScore ? zpTotalScore.toFixed(2) : 0 }}</div>
                        </div>
                    </div>
                </div>
                <div class="p-center w95 h95 h-center" id="statisticsRadarBox">
                    <home-radar
                        v-if="mapBox.ready && radarData.length > 0"
                        id="homeApplyStatisticsRadar"
                        :width="mapBox.width"
                        :height="mapBox.height"
                        :data="radarData"
                        :maxValue="radarMaxValue"
                    ></home-radar>
                </div>
            </div>
            <div class="w50 h100 bg-white br5 p10 p-r ml5">
                <div class="h-between-center w100 pr20">
                    <div class="h-start-center">
                        <div class="apply-item-icon mr5"></div>
                        <div class="f16 fam ml5">扣/加分统计</div>
                    </div>
                </div>
                <div class="h-start-center w100 pr20 f-wrap p10">
                    <div v-for="(item, index) in scoreLegend" :key="index" class="w25 h-start-center mb3">
                        <div class="mr5 circle5" :style="'color:' + item.color"></div>
                        <div class="">{{ item.label }}</div>
                    </div>
                </div>
                <div class="p-center w90 h90" id="statisticsColorBubblesBox">
                    <color-bubbles
                        v-if="mapBox2.ready && bubbleData.length > 0"
                        id="statisticsColorBubbles"
                        :width="mapBox2.width"
                        :height="mapBox2.height"
                        :data="bubbleData"
                        :legend="scoreLegend"
                    ></color-bubbles>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import HomeRadar from '@/d3/radar/home.vue'
import ColorBubbles from '@/d3/colorfulBubbles/statistics.vue'
import { currentScoreGet, xianUpDownScoreGet } from '../../common/api/setting'
export default {
    components: { HomeRadar, ColorBubbles },
    data() {
        return {
            bubbleData: [],
            colors: ['#FEAC4C', '#00B928', '#FF2D2E', '#8676FF', '#023AFF', '#2DB3FF', '#FFDB00', '#e377c2'],
            scoreLegend: [],
            zpTotalScore: 0,
            radarData: [],
            mapBox: { ready: false },
            mapBox2: { ready: false },
        }
    },
    computed: {
        radarMaxValue() {
            // return _.max(this.radarData.map(n => n.value))
            return 100
        },
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                let dom = document.getElementById('statisticsRadarBox')
                const { offsetWidth, offsetHeight } = dom
                this.mapBox.width = offsetWidth
                this.mapBox.height = offsetHeight
                this.mapBox.ready = true
                {
                    let dom = document.getElementById('statisticsColorBubblesBox')
                    const { offsetWidth, offsetHeight } = dom
                    this.mapBox2.width = offsetWidth
                    this.mapBox2.height = offsetHeight
                    this.mapBox2.ready = true
                }
            }, 100)
        })

        this.loadLatestScore()

        this.loadLatestUpDownScore()
    },
    methods: {
        async loadLatestScore() {
            let res = await currentScoreGet()
            this.radarData = res.data.itemList.map(n => {
                return {
                    label: n.name,
                    value: Math.ceil((n.zpScore * 100) / n.itemTotalScore),
                }
            })

            this.zpTotalScore = res.data.zpScore
        },
        async loadLatestUpDownScore() {
            let res = await xianUpDownScoreGet()

            if (res.code == 200) {
                console.log('123', res)

                this.scoreLegend = res.data.nameList
                    .sort((a, b) => a.sortNum > b.sortNum)
                    .map((n, i) => {
                        return {
                            id: n.id,
                            label: n.name,
                            color: this.colors[i] || 'black',
                        }
                    })

                this.bubbleData = res.data.childrenList
                    .filter(n => Math.abs(n.score - 0) >= 0.01)
                    .map(n => {
                        return {
                            id: n.id,
                            label: n.name,
                            value: Math.round(n.score * 100) / 100,
                        }
                    })
            }
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/ .el-calendar-table .el-calendar-day {
    height: 40px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
/deep/ .el-calendar-table {
    thead {
        th {
            text-align: center;
        }
    }
}

.task-item {
    background: #f7fafe;
    border: 1px solid #e2e5ea;
    border-radius: 5px;
    height: 88px;
    width: 100%;
    .icon-box {
        width: 56px;
        height: 56px;
        background: #deebff;
        border-radius: 8px;
    }
}
</style>
